<template>
	<el-container>


		<el-main>
			<el-row>
				<el-col :span="6" v-for="(dynamicDate,index) in dynamicDates" :key="index">
					<el-card :body-style="{ padding: '20px' }" class="col">
						<img :src="require('../../assets/' + dynamicDate.userDynamicContent.img)" class="image">
						<div style="padding: 14px;">
							<span>{{dynamicDate.userDynamicContent.title}}</span>
							<!-- <input type="text" v-model="dynamicDate.dynamicLike" v-show="false" /> -->
							<el-button type="text" @click="drawer = true;commentchange(dynamicDate.dynamicId)"
								class="button">查看动态</el-button>
							<i :class="tubiao" style="float: left;" @click.stop="change(dynamicDate.dynamicId)">
								<font style="font-size: 10px;">{{dynamicDate.dynamicLike}}</font>
							</i>
							<el-drawer :title="dynamicDate.userDynamicContent.title" :visible.sync="drawer" size="50%">
								<el-divider content-position="left">内容</el-divider>
							 <span>{{dynamicDate.userDynamicContent.dynamicContent}}</span>
								<el-divider content-position="left">评论</el-divider>
								<div v-for="comment in comments">
									<i>{{comment.commentContent}}</i>
									<el-divider></el-divider>
								</div>
								<div>
									<el-button @click="innerDrawer = true">发表评论</el-button>
									<el-drawer title="" :append-to-body="true" :before-close="handleClose"
										:visible.sync="innerDrawer">
										<el-form ref="form" :model="form" label-width="80px">
											<el-form-item label="评论">
												<el-input type="textarea" v-model="form.commentContent"></el-input>
												<el-button type="primary" @click="onSubmit(dynamicDate.dynamicId)">发表评论</el-button>
											</el-form-item>
										</el-form>
									</el-drawer>
								</div>
							</el-drawer>
						</div>
					</el-card>
				</el-col>
			</el-row>

		</el-main>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				drawer: false,
				innerDrawer: false,
				currentDate: new Date(),
				form: {
					dynamicId:'',
					commentContent: ''
				},
				dynamicDates: [],
				msg: '',
				comments: [],
				count:0,
				tubiao:"el-icon-star-off"

			};
		},
		methods: {
			handleClose(done) {
				this.$confirm('还有未保存的工作哦确定关闭吗？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			onSubmit(dynamicId) {
				console.log('submit!');
				alert("发表成功");
					this.axios.post("hthttp://localhost:8080/bbs/addDynamicComment", this.form).then(res => {
				console.log(res);
				console.log(res.data.msg);
				this.msg = res.data.msg
				
					})
				
			},
			change(dynamicId) {
				if(this.count == 0){
					this.axios.get("http://localhost:8080/bbs/plusLike", {
						params: {
							"dynamicId": dynamicId,
						}
					}).then(res => {
						console.log(res);
						console.log(res.data.msg);
						this.msg = res.data.msg
					});
					this.count = 1;
					this.tubiao = "el-icon-star-on";
				}else{
					this.axios.put("http://localhost:8080/bbs/subtractLike", 
						
							"dynamicId=" + dynamicId
						
					).then(res => {
						console.log(res);
						console.log(res.data.msg);
						this.msg = res.data.msg
					});
					this.count = 0;
					this.tubiao = "el-icon-star-off";
				}


			},

			commentchange(dynamicId) {

				this.axios.get("http://localhost:8080/bbs/findDynamicComment", {
					params: {
						"dynamicId": dynamicId,
			  }
				}).then(res => {
					console.log(res);
					console.log(res.data.data[0].commentContent);
					this.comment = res.data.data
					console.log(this.comment[0].commentContent);
				})
			}
		},
		created() {
			this.axios.get("http://localhost:8080/bbs/recommendDynamic").then(res => {
				console.log(res);
				console.log(res.data.data);
				console.log(res.data.data[0].userDynamicContent.img);
				this.dynamicDates = res.data.data

			})
		}
	}
</script>

<style>
	.col {
		height: 600px;
	}

	.time {
		font-size: 13px;
		color: #999;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
	}

	.button {
		padding: 0;
		float: right;
	}

	.image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}
</style>
